<template>
  <div class="login-container">
    <el-card class="card-container" shadow="always">
      <div class="login-form">
        <div class="login-form-left">
          666
        </div>
        <div class="login-form-right">
          777
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {isPassword, isUsername} from "@/utils/validate/validate"

const loginForm = ref({
  username: 'admin',
  password: '111111'
})

const loginRules = ref({
  username: [{required: true, trigger: 'blur', validator: isUsername}],
  password: [{required: true, trigger: 'blur', validator: isPassword}]
})

const formData = ref({
  passwordType: 'password',
  capsTooltip: false,
  loading: false,
  dialogFormVisible: false,
  redirect: undefined,
  otherQuery: {}
})

const checkCapslock = () => {

}

const handleLogin = () => {

}

const handleDialog = () => {
  formData.value.dialogFormVisible = true
}
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  position: relative;
  background-color: beige;

  .card-container {
    width: 60%;
    height: 60%;
    background-color: pink;
    position: absolute;

    .login-form {
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      background-color: aquamarine;

      .login-form-left {
        width: 50%;
        height: 100%;
        display: inline-block;
        background-color: #24da70;
      }

      .login-form-right {
        width: 50%;
        height: 100%;
        display: inline-block;
        background-color: darksalmon;
      }
    }
  }

}


</style>
